<template>
	<view class="order-item bg-white radius-16 padding-sm margin-bottom-sm">
		<!-- 订单头部-订单编号&订单状态-开始 -->
		<view class="flex align-center justify-between text-666">
		  <view class="text-666 fu-fs28">
		    <text>{{ i18n['订单编号'] }}: {{ item.server_no }}</text>
		  </view>
		  <view>
				<text class="refund-tag">{{ item.refund_type | filterRefundType }}</text>
		    <text class="text-theme">{{ item.status | filterStatus }}</text>
		  </view>
		</view>
		<!-- 订单头部-订单编号&订单状态-结束 -->
		<!-- 订单商品开始 -->
		<view class="padding-tb solid-bottom" @tap.stop="navToOrderDetail(item, index)">
			<view class="flex align-stretch">
				<view class="width-200 height-200 margin-right-sm">
					<fu-image :src="item.goods_thumb" radius="8" mode="aspectFill"></fu-image>
				</view>
				<view class="flex-sub flex flex-direction justify-between" style="min-width: 1px;">
					<view>
						<view class="text-cut-2 text-333 text-bold fu-fs28">{{ item.goods_name }}</view>
						<view class="fu-fs24 text-999 text-cut margin-top-xs">{{ item.sku_name }}</view>
					</view>
					<view class="flex justify-between align-center">
						<text class="text-theme text-bold">
							<text class="text-price fu-fs20"></text>
							<text class="fu-fs32">{{ item.shop_price | filterPriceInt}}.</text>
							<text class="fu-fs22">{{ item.shop_price | filterPriceFloat}}</text>
						</text>
						<text class="fu-fs24 text-999">x {{ item.num }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单商品结束 -->
		<!-- 操作按钮开始 -->
		<view class="padding-top">
			<view class="flex align-center justify-end">
				<button class="round width-170 height-60 fu-fs24 margin-left-sm btn cu-btn" v-if="isContentShow([-2], item.status)" @tap.stop="delOrder">{{ i18n['删除订单'] }}</button>
				<button class="round width-170 height-60 fu-fs24 margin-left-sm btn cu-btn" v-if="isContentShow([-2, 0, 1, 3], item.status)" @tap.stop="navToOrderDetail(item)">查看详情</button>
				<button class="round width-170 height-60 fu-fs24 margin-left-sm btn cu-btn" v-if="isContentShow([2], item.status)" @tap.stop="navToOrderDetail(item)">{{ i18n['查看物流'] }}</button>
			</view>
		</view>
		<!-- 操作按钮结束 -->
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default() {
				  return {};
				}
			},
			index: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			/**
			 * 删除订单
			 */
			delOrder() {
			  this.$util.showModal({
			    title: this.i18n['提示'],
			    content: this.i18n['确认删除吗？'],
			    success: res => {
			      if (res.confirm) {
			        this.$api.post(global.apiUrls.delAfterSale, {
								id: this.item.id
							}).then(result => {
								if (result.data.code == 1) {
									this.$message.info(this.i18n['删除成功']);
									uni.$emit('onPageUpdata', {
										type: 4, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单
										index: this.index,
									})
								} else {
									this.$message.info(result.data.msg);
								}
							}).catch(err => {
								this.$message.info('服务器错误，请稍后重试');
							});
			      }
			    }
			  })
			},
			/**
			 * @description 查看订单详情
			 * @param {String} item = 订单列表项
			 * @param {Number} index = 当前订单在列表中的索引
			 * */
			navToOrderDetail(item, index) {
				this.$urouter.navigateTo({
					url: '/pages/order/afterorder/afterorder-detail/index',
					params: {
						id: item.id,
						itemIndex: this.index
					}
				});
			},
			/**
			 * @description 判断内容是否显示
			 * @param {String} arr = 要判端数组
			 * @param {String | Number} val = 要判的值
			 */
			isContentShow(arr, val) {
			  return arr.includes(val * 1);
			},
		},
		filters: {
		  // 订单状态过滤器  status每个值代表的状态 状态【0:申请中;-2:用户取消;-1:驳回;1:同意/买家发货中;2:确认收货;3:确认打款】 
		  filterStatus(val) {
		    switch (val) {
		      case 0:
		        return "待审核";
		      case 1:
		        return "同意售后";
		      case 2:
		        return "确认收货";
		      case 3:
		        return "售后完成";
		      case -1:
		        return "驳回";
					case -2:
					  return "售后关闭";
		      default:
		        return '';
		    }
		  },
		  // 售后状态过滤器
		  filterRefundStatus(val,refund_type,express_no) {
		    switch (val) {
		      case 0:
		        return global.i18n['待审核'];
		      case 1:
		        let tips = global.i18n['待寄回'];
		        if((refund_type == 1 || refund_type == 2) && express_no) tips = global.i18n['待退款'];
		        return tips;
		      case 2:
		        return global.i18n['待退款'];
		      case 3:
		        return global.i18n['售后已完成'];
		      case -1:
		        return global.i18n['商家驳回'];
		      case -2:
		        return global.i18n['售后关闭'];
		      default:
		        return '';
		    }
		  },
		  // 售后类型过滤器
		  filterRefundType(val) {
		    console.log('val', val);
		    switch (val) {
		      case 1:
		        return '退款';
		      case 2:
		        return '退货';
		      case 3:
		        return '换货';
					default:
					  return '';
		    }
		  },
		  filterPriceInt(val){
		    if(!val) return "";
		    return val.toString().split('.')[0];
		  },
		  filterPriceFloat(val){
		    if(!val) return "";
		    return val.toString().split('.')[1];
		  },
		}
	}
</script>

<style scoped lang="scss">
	.order-item {
		.refund-tag {
		  font-size: 20rpx;
		  padding: 0 8rpx;
		  background: rgba(47, 152, 254, 0.06);
		  border: 1rpx solid #2f98fe;
		  border-radius: 40rpx 40rpx 0rpx 40rpx;
		  color: #2f98fe;
		  margin-right: 8rpx;
		}
		.btn {
		  color: #333;
		  background-color: #f6f6f6;
			// &:last-child {
			// 	color: #fff;
			// 	background: $bgtheme;
			// }
		}
	}
</style>
